<template>
  <view class="wrap">
    <view>最近确诊人数</view>
    <mpvue-echarts
      v-if="isShow"
      :echarts="echarts"
      @onInit="initChart"
      canvasId="demo-canvas" ref="lineChart"
    />
  </view>
</template>

<script>
import * as echarts from "../../static/echarts/echarts.min.js";
import mpvueEcharts from "mpvue-echarts";
export default {
  name: "index",
  mounted() {
    const Promise1 = new Promise((resolve, reject) => {
      uni.request({
        url: `https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare`,
        success: (res) => {
          this.result = res.data.data.chinaDayAddList.slice(-20)
          console.log(this.result);
          resolve();
        },
        fail: (err) => {
          reject(err);
        },
      });
    })
      .then(() => {
        this.isShow = true;
      })
      .catch((err) => {
        console.log(err);
      });

  },
  data() {
    return {
      echarts,
      k: 0,
      isShow: false,
    };
  },
  components: {
    mpvueEcharts,
  },
  methods: {
    async getA() {
      let res = [];
      for (let i = 0; i < this.result.length; i++) {
        res.push(this.result[i].confirm);
      }
      this.A = res;
    },
    async getX() {
      let res = [];
      for (let i = 0; i < this.result.length; i++) {
        res.push(this.result[i].date);
      }
      this.X = res;
    },
    async initChart(e) {
      await this.getA();
      await this.getX();
	  let { width, height } = e;
	  let canvas = this.$refs.lineChart.canvas;
	  echarts.setCanvasCreator(() => canvas);
      let Charts = echarts.init(canvas, null, {
        width: width,
        height: height,
      });
      canvas.setChart(Charts);
      var option = {
        backgroundColor: "#fff",
        color: ["#37A2DA", "#67E0E3"],
        legend: {
          data: ["新增确诊人数"],
        },
        grid: {
          containLabel: true,
          left: 0,
          right: 0,
          bottom: 0,
          top: 10,
        },
        xAxis: {
          type: "category",
          data: this.X,
        },
        yAxis: {
          x: "center",
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "A",
            type: "line",
            smooth: true,
            data: this.A,
          },
        ],
      };
      Charts.setOption(option);
	  this.$refs.lineChart.setChart(Charts);
      // return Charts;
    },
  },
};
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 250rpx;
  text-align: center;
}
</style>